<template>
  <div class="page-container" v-bind="$attrs">
    <div v-if="showHeader" class="page-container-header">
      <slot name="title">
        <span class="page-container-header--title"> {{ title }}</span>
      </slot>
    </div>
    <div class="page-container-body" :class="bodyClass">
      <el-scrollbar v-if="scroll">
        <slot></slot>
      </el-scrollbar>
      <template v-else>
        <slot></slot>
      </template>
    </div>
    <div v-if="!!$slots['footer']" class="page-container-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script name="PageContainer" lang="ts" setup>
  import { withDefaults, useSlots, computed, type CSSProperties } from 'vue';

  const props = withDefaults(
    defineProps<{
      title?: string;
      scroll?: boolean;
      bodyClass?: string;
      bodyStyle?: CSSProperties;
    }>(),
    { title: undefined, scroll: true, bodyClass: undefined }
  );

  const solts = useSlots();

  const showHeader = computed(() => !!solts.title || !!props.title);
</script>
